<template>
  <el-col :span="16">
    <div class="digital-data">
      <el-card shadow="hover" v-if="countData" v-for="item in countData" :key="item.name">
        <!-- 因为有时候我们组件已经创建完成但是我们的数据还没有从父组件那里传过来   所以我们需要一个v-if判断 -->
        <i class="icon" :class="'el-icon-'+item.icon" :style="{backgroundColor: item.color}"></i>
        <div class="detail">
          <p class="num">{{'￥'+item.value}}</p>
          <p class="text">{{item.name}}</p>
        </div>
      </el-card>
    </div>
    <el-card shadow="hover">
      <echart style="height: 280px;" v-if="echartData.order.series" :chartData="echartData.order"></echart>
    </el-card>
    <div class="graph">
      <el-card shadow="hover">
        <echart style="height: 260px;" v-if="echartData.user.series" :chartData="echartData.user"></echart>
      </el-card>
      <el-card shadow="hover">
        <echart style="height: 260px;" v-if="echartData.video" :chartData="echartData.video" :isAxisChart="false">
        </echart>
      </el-card>
    </div>
  </el-col>
</template>
<script>
  import Echart from '../EChart'
  export default {
    props: ['countData'],
    components: {
      Echart,
    },
    data() {
      return {
        echartData: {
          order: {
            xData: [],
            series: []
          },
          user: {
            xData: [],
            series: []
          },
          video: {
            series: []
          }
        }
      }
    },
    watch: {
      xechartData: {
        handler() {
          this.getEchartData()
        },
        immediate: true,
        deep: true
      }
    },
    computed: {
      xechartData() {
        return this.$store.state.echart.echartData
      }
    },
    methods: {
      getEchartData() {
        const echartData = this.$store.state.echart.echartData
        this.echartData.order.xData = echartData.order.xData
        this.echartData.order.series = echartData.order.series
        this.echartData.user.xData = echartData.user.xData
        this.echartData.user.series = echartData.user.series
        this.echartData.video.series = echartData.video.series
      }
    },
  }
</script>
<style lang="scss" scoped>
  .digital-data {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .digital-data .el-card {
    width: 32%;
    margin-bottom: 20px;
  }

  .digital-data .el-card /deep/ .el-card__body {
    /*因为修改组件内部的样式不能穿透修改，所以我需要在要修改样式的前面加一个/deep/。如果不想用这种方法可以去饿了么的card组件里面查看是否有对应的api*/
    display: flex;
    padding: 0;
  }

  .digital-data .icon {
    width: 80px;
    height: 80px;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
  }

  .digital-data .detail {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .digital-data .detail .num {
    font-size: 30px;
    margin-bottom: 10px;
  }

  .digital-data .detail .text {
    font-size: 14px;
    color: #999;
  }

  .graph {
    display: flex;
    justify-content: space-between;
  }

  .graph .el-card {
    width: 48%;
    margin-top: 20px;
  }
</style>